<template>
    <div class="ml-16px mr-16px content-container">
        <div class="flex items-center pt-26px pl-26px pr-26px">
            <Remind v-if="isShowRemind" @update:data="isShowRemind = !isShowRemind">
                <template #title>
                    提示： 
                </template>
                <template #content>
                    1、请务必上传合法、原创、高清图片/视频，避免审核无法通过，或因低质/违规内容导致账号被处罚、封禁。<br>
2、请用户严格遵守法律法规，严禁上传任何违法、违规、低俗、过激、虚假及违反社会公序良俗等信息，系统自动排查，一经发现，立即封号并报相关部门处理，所有后果及责任由用户承担。
                </template>
            </Remind>
        </div>
        <div class="flex items-center pt-26px pl-26px pr-26px">
            <el-input v-model="formData.title" placeholder="请输入文件夹名称" class="w-300px mr-12px"></el-input>
            <div class="w-190px mr-12px">
                <el-select v-model="formData.type" placeholder="请选择类型">
                    <el-option v-for="item in formData.types" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </div>
            <el-button type="primary" :icon="Search" v-debounce="{ callback: handleSearch, delay: 300 }">搜索</el-button>
            <el-button type="primary" :icon="Plus" v-debounce="{ callback: handleSearch, delay: 300 }">添加文件夹</el-button>
            <div class="flex items-center ml-30px text-14px">
                 <div>存储空间：1500MB/5000MB</div>
                <div class="w-200px ml-20px">
                    <el-progress :percentage="50" />
                </div>
            </div>
        </div>
        <div class="pt-26px pl-26px pr-26px table-container">
            <el-table :data="state.covers" :default-sort="{ prop: 'coverTotal', order: 'descending' }" show-summary class="w-full">
                <el-table-column prop="sort" label="序号" align="center" width="80" />
                <el-table-column prop="name" label="文件夹名称" align="center" />
                <el-table-column prop="type" label="文件夹类型" align="center" width="150">
                    <template #default="scope">
                        <div v-if="scope.row.type == 0"><el-tag type="success"><!--9:16-->坚屏图片</el-tag></div>
                        <div v-else-if="scope.row.type == 1"><el-tag>横屏图片</el-tag></div>
                    </template>
                </el-table-column>
                <el-table-column prop="coverTotal" label="视频数量" sortable align="center" width="150" />
                <el-table-column prop="space" label="占用空间" sortable align="center" width="120" />
                <el-table-column label="操作" align="center" width="300">
                    <template #default="scope">
                        <el-button :icon="Setting" type="primary" text>管理</el-button>
                        <el-button :icon="Edit" type="primary" text class="!ml-0">编辑</el-button>
                        <el-button :icon="Delete" type="danger" text class="!ml-0">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="pt-26px pl-26px pr-26px pb-26px page-container flex flex-center">
            <el-pagination
                size="small"
                background
                layout="prev, pager, next"
                :total="50"
            />
        </div>
    </div>
</template>

<script setup lang="ts">
import { Search,Plus,Delete,Edit,Setting } from '@element-plus/icons-vue'

const isShowRemind = ref(true)

const formData = reactive({
    title: '',
    type: '',
    types:[
        {
            value: '1',
            label: '所有类型'
        },
        {
            value: '2',
            label: '坚屏图片'
        },
        {
            value: '3',
            label: '横屏图片'
        },
    ]
})

const state = reactive({
    covers:[
        {
            sort: 1,
            name: '熟料粉碎机',
            type: 1,
            coverTotal:2865,
            space:40,
        },
        {
            sort: 2,
            name: '熟料粉碎机',
            type: 0,
            coverTotal:2865,
            space:40

        },
    ]
})

function handleSearch() {
    console.log('search')
}
</script>

<style scoped>

</style>